<template>
  <d2-container>
    <div class="tdesign-demo-block-column" style="margin-bottom: 20px">
      <!-- 只指定水平gutter，垂直默认为0 -->
      <t-row :gutter="16">
        <t-col :span="4">
          <el-card class="box-card">
            <el-descriptions title="用户信息" column="2">
              <el-descriptions-item label="用户名">王鸿宇</el-descriptions-item>
              <el-descriptions-item label="车牌号"
                >京A-0001</el-descriptions-item
              >
              <el-descriptions-item label="准驾车型">A1</el-descriptions-item>
              <el-descriptions-item label="登记号码"
                >13657689956</el-descriptions-item
              >
            </el-descriptions>
          </el-card>
        </t-col>
        <t-col :span="6">
          <!-- <div class="record">尚未处理记录</div> -->
          <el-card class="box-card">
            <el-descriptions title="执照信息" :column="3">
              <el-descriptions-item label="驾驶证号"
                >330328000001</el-descriptions-item
              >
              <el-descriptions-item label="驾驶证有效期"
                >2026-01-01</el-descriptions-item
              >
              <el-descriptions-item label="下一清分日期"
                >2023-01-01</el-descriptions-item
              >
              <el-descriptions-item label="下一体检日期"
                >2026-01-01</el-descriptions-item
              >
              <el-descriptions-item label="数据更新日期"
                >2022-03-11</el-descriptions-item
              >
              <el-descriptions-item label="执照状态">吊销</el-descriptions-item>
            </el-descriptions>
            <!-- <el-descriptions :column="2">
              <el-descriptions-item label="驾驶证号"
                >1234567890</el-descriptions-item
              >
            </el-descriptions> -->
          </el-card>
        </t-col>

        <t-col :span="2">
          <!-- <div class="handle">申述</div> -->
          <el-card class="box-card">
            <el-descriptions title="违规统计" column="1">
              <el-descriptions-item label="累计扣分">12</el-descriptions-item>
              <el-descriptions-item label="特殊加分">12</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </t-col>
      </t-row>
    </div>

    <t-table
      rowKey="index"
      :data="data"
      :columns="columns"
      :height="200"
      style="margin-bottom: 30px"
    ></t-table>

    <t-table
      rowKey="index"
      :data="data"
      :columns="columns"
      :height="200"
      style="margin-bottom: 30px"
    ></t-table>
  </d2-container>
</template>

<script>
const data = []
// for (let i = 0; i < 2; i++) {
//   data.push({
//     index: i,
//     platform: i % 2 === 0 ? "共有" : "私有",
//     type: ["String", "Number", "Array", "Object"][i % 4],
//     default: ["-", "0", "[]", "{}"][i % 4],
//     detail: {
//       postion: `读取 ${i} 个数据的嵌套信息值`,
//     },
//     needed: i % 4 === 0 ? "是" : "否",
//     description: "数据源",
//   });
// }
export default {
  data() {
    return {
      data,
      columns: [
        {
          align: 'center',
          width: '100',
          colKey: 'index',
          title: '日期'
        },
        {
          width: 100,
          colKey: 'platform',
          title: '平台'
        },
        {
          colKey: 'type',
          title: '类型'
        },
        {
          colKey: 'default',
          title: '默认值'
        },
        {
          colKey: 'needed',
          title: '是否必传'
        },
        {
          colKey: 'detail.postion',
          title: '详情信息',
          width: 200,
          ellipsis: true
        },
        {
          colKey: 'description',
          title: '说明'
        }
      ]
    }
  }
}
</script>

<style scoped>
.box-card {
  height: 150px;
}
</style>
